import { createBehavior, createResource } from '@inbiz/core';
import { getIsH5 } from '@inbiz/utils';
import {
  createInbizSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createBizStyleSchema,
  createControllerSchema,
} from '@inbiz/setters';

import { personal } from './locale';

export const personalDefault = {
  title: 'personalInfo.personSetting',
  tagName: 'setter',
  hide: false,
  isDel: false,
  isHide: true,
  isEdit: true,
  personConfig: [
    {
      id: 'basic',
      name: {
        value: 'personalInfo.baseConfig',
      },
      status: {
        value: true,
      },
      theme: '',
    },
    {
      id: 'theme',
      name: {
        value: 'personalInfo.themeConfig',
      },
      status: {
        value: false,
      },
      theme: {
        value: ['techblue', 'gray', 'deepskyblue', 'purple', 'deepblue'],
      },
    },
    {
      id: 'password',
      name: {
        value: 'personalInfo.setPassword',
      },
      status: {
        value: true,
      },
      theme: '',
    },
  ],
};
export const defaultProps = {
  configList: [
    personalDefault,
    {
      title: 'personalInfo.lang',
      tagName: 'lang',
      isExternalAddress: false,
      link: '',
      children: true,
      hide: false,
      isDel: false,
      isHide: true,
      isEdit: false,
    },
    {
      title: 'personalInfo.theme',
      tagName: 'theme',
      isExternalAddress: false,
      link: '',
      children: true,
      isDel: false,
      isHide: true,
      isEdit: true,
      id: 'datasourceTheme',
      themeConfig: ['techblue', 'gray', 'deepskyblue', 'purple', 'deepblue'],
    },
    // {
    //   name: '关于',
    //   tagName: 'about',
    //   isExternalAddress: false,
    //   isDefault: true,
    //   link: '',
    //   children: [],
    //   isShow: true,
    // },
    {
      title: 'personalInfo.signout',
      tagName: 'signout',
      isDel: false,
      hide: false,
      externalAddress: false,
      link: '',
      isBottom: true,
      notDrag: true,
      isHide: true,
      isEdit: false,
    },
  ],
  mobileconfigList: [
    {
      icon: {
        type: 'icon-user',
      },
      title: 'personalInfo.baseInfo',
      linkAddress: 'base',
      id: '1',
      externalAddress: false,
      hide: false,
      isDel: false,
      isHide: true,
      isEdit: false,
      page: 'base',
      isSelfPage: true,
    },
    {
      icon: {
        type: 'icon-lock',
      },
      title: 'personalInfo.editPassword',
      linkAddress: 'pass',
      id: '2',
      isDel: false,
      hide: false,
      externalAddress: false,
      isHide: true,
      isEdit: false,
      page: 'pass',
      isSelfPage: true,
    },
  ],
  headerStyle: {
    icon: {
      type: 'icon-gerenxinxi',
      size: 32,
      color: 'rgba(0,0,0,1)',
    },
  },
  viewType: 'simple',
  title: {
    status: true,
    value: 'personalInfo.personSetting',
  },
  showExit: 'true',
  style: {
    padding: '0px 20px 15px 20px',
  },
  titleFontSize: 20,
  titleBackground: 'rgba(255,255,255,1)',
  titleFontColor: 'rgba(0,0,0,1)',
  showLang: false,
  // textcolor: 'rgba(0,0,0,1)',
};

export const propsSchema = createInbizSchema({
  attribute: {
    group_viewType: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            viewType: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['mini', 'card', 'simple'],
            },
          },
        },
      },
      platform: 'web',
    },
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        title: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': 'StatusInput',
          'x-reactions': {
            dependencies: ['form.attribute.group_viewType.x-component-props.viewType'],
            fulfill: {
              state: {
                visible: "{{$deps[0] != 'simple'}} && {{$deps[0] != 'mini'}}",
              },
            },
          },
          // platform: 'web',
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            showLang: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-reactions': {
                dependencies: ['.viewType'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== "mini"}}',
                  },
                },
              },
            },
            showExit: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['true', 'false'],
              'x-component-props': {
                defaultValue: 'true',
              },
              platform: 'wap',
            },
            // textcolor: {
            //   type: 'string',
            //   'x-decorator': 'FormItem',
            //   'x-component': 'ColorInput',
            //   'x-reactions': {
            //     dependencies: ['.viewType'],
            //     fulfill: {
            //       schema: {
            //         'x-hidden': '{{$deps[0] !== "simple"}}',
            //       },
            //     },
            //   },
            //   platform: 'web',
            // },
            configList: {
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component-props': {
                config: {
                  // 标题
                  title: true,
                  externalAddress: true,
                  linkAddress: true,
                  page: true,
                  isShowPersonConfig: true,
                  openMode: true,
                },
                // 新建时表单默认值
                default: {
                  title: '',
                  hide: false,
                  externalAddress: false,
                  linkAddress: '',
                  page: '',
                  openMode: 1,
                  windowWidth: '60%',
                  windowHeight: '60%'
                },
              },
              'x-component': 'DataSource',
              'x-reactions': {
                dependencies: ['form.attribute.group_viewType.x-component-props.viewType'],
                fulfill: {
                  state: {
                    hidden: "{{$deps[0] != 'simple'}}",
                  },
                },
              },
              platform: 'web',
            },
            mobileconfigList: {
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component': 'DataSource',
              'x-component-props': {
                config: {
                  // 标题
                  title: true,
                  externalAddress: true,
                  linkAddress: true,
                  page: true,
                  icon: true,
                },
                // 新建时表单默认值
                default: {
                  title: '',
                  hide: false,
                  icon: {
                    size: 18,
                  },
                  externalAddress: false,
                  linkAddress: '',
                  page: '',
                },
              },
              platform: 'wap',
            },
          },
        },
      },
    },
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema({}, {}, undefined, {
        dependencies: ['.viewType'],
        fulfill: {
          schema: {
            'x-hidden': '{{$deps[0] !== "card"}}',
          },
        },
      }),
      // height: {
      //   type: 'number',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'NumberPicker',
      //   'x-component-props': {
      //     min: 1,
      //   },
      // },
      // titleFontSize: {
      //   type: 'number',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'NumberPicker',
      //   'x-reactions': {
      //     dependencies: [
      //       'form.attribute.group_viewType.x-component-props.viewType',
      //       'form.attribute.base.title',
      //     ],
      //     fulfill: {
      //       state: {
      //         hidden: "{{$deps[0] == 'card' && $deps[1].status?false:true}}",
      //       },
      //     },
      //   },
      //   'x-component-props': {
      //     min: 12,
      //     max: 72,
      //     defaultValue: 20,
      //   },
      // },
      // icon: {
      //   type: 'string',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'IconPicker',
      //   'x-reactions': {
      //     dependencies: [
      //       'form.attribute.group_viewType.x-component-props.viewType',
      //       'form.attribute.base.title',
      //     ],
      //     fulfill: {
      //       state: {
      //         hidden: "{{$deps[0] == 'card' && $deps[1].status?false:true}}",
      //       },
      //     },
      //   },
      // },
      // titleBackground: {
      //   'x-decorator': 'FormItem',
      //   'x-component': (props) => {
      //     return <Color {...props} />;
      //   },
      //   'x-reactions': {
      //     dependencies: [
      //       'form.attribute.group_viewType.x-component-props.viewType',
      //       'form.attribute.base.title',
      //     ],
      //     fulfill: {
      //       state: {
      //         hidden: "{{$deps[0] == 'card' && $deps[1].status?false:true}}",
      //       },
      //     },
      //   },
      // },
      // titleFontColor: {
      //   'x-decorator': 'FormItem',
      //   'x-component': (props) => {
      //     return <Color {...props} />;
      //   },
      //   'x-reactions': {
      //     dependencies: [
      //       'form.attribute.group_viewType.x-component-props.viewType',
      //       'form.attribute.base.title',
      //     ],
      //     fulfill: {
      //       state: {
      //         visible: "{{$deps[0] == 'card' && $deps[1].status}}",
      //       },
      //     },
      //   },
      // },
    }),
    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "onClick",
        label: "注销登录",
        platform: 'web'
      },
      {
        name: "onPersonInfoUpdate",
        label: "修改个人信息",
        platform: 'web'
      },
      {
        name: "onBeforeSignOut",
        label: "退出登录前处理登录链接",
        isConfigEvent: true,
        platform: 'web'
      },
    ]
  })
});

export const Behavior = createBehavior({
  name: 'PersonalInfo',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'PersonalInfo',
  designerProps: {
    propsSchema,
    allowDrop: (node: any) => {
      if (getIsH5()) {
        return node.props['x-component'] === 'Form' || node.props['x-component'] === undefined
      }
      return true
    },
  },
  designerLocales: personal,
});

export const Resource = createResource({
  icon: 'PersonInfo',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: getIsH5() ? 'personalInfo.personCenter' : 'personalInfo.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'PersonalInfo',
        'x-component-props': defaultProps,
        'x-decorator-props': {
          style: {
            height: '100%',
          },
        },
      },
    },
  ],
});
